<template>
  <div style="margin-bottom: 84px">
    <!-- hide-on-single-page -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.pageSize"
      :page-count="page.totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "pagination",
  data() {
    return {};
  },
  props: ['page'],
  methods: {
    handleCurrentChange(val) {
      //改变当前页码
      this.$emit('changeCurrentPage', val)
    },
    handleSizeChange(val){
      //改变每页显示条数
      this.$emit('changePageSize', val);
    }
  }
};
</script>

<style lang="scss">
.el-pagination{
  position:absolute;
  right:27px;
  padding-top: 24px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  .el-pagination__total{
    margin-right:23px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px !important;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .el-pagination__sizes{
    margin-right:25px;
    .el-select{
      .el-input{
        margin:0;
        .el-input__inner{
          border-radius: 2px;
          border: 1px solid #DDDFE6;
        }
        .el-input__suffix{
          color:rgba(216, 216, 216, 1);
        }
      }
    }
  }
  button:disabled{
    color:rgba(216, 216, 216, 1);
  }
  .btn-prev{
    padding-left:0;
  }
  .btn-next{
    padding-right:0;
  }
  .el-pager{
    li{
      font-size: 13px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.7);
    }
    li.active{
      color:rgba(72, 128, 204, 1);
    }
    li:hover{
      color:rgba(72, 128, 204, 1);
    }
  }
  .el-pagination__jump{
    margin-left:24px;
    font-size: 12px !important;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    .el-input{
      margin-left:4px;
      margin-right:4px;
      padding:0;
      .el-input__inner{
        height: 28px;
        border-radius: 2px;
        border: 1px solid #DDDFE6;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
}
</style>
